<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import UnlockMask from './unlock-mask/index.vue'

import { imagePath } from '@/libs/file-utils'
import { friendInfo, result, lockedStatus, fortuneList } from './data'
import { createPoster } from './data'
import { back } from '@/libs/common'
import { showUnlockMask } from './unlock-mask/data'
import { userInfo } from '@/libs/user'

const img_bg = imagePath('community/friend/detail/bg.jpg')
const img_logo = imagePath('community/friend/detail/logo.png')
const icon_link = imagePath('community/friend/info/icon-link.png')
const icon_switch = imagePath('community/friend/detail/icon-switch.svg')
const btn_bg = imagePath('community/friend/detail/btn.png')
const info_bg = imagePath('community/friend/detail/info-bg.jpg')

const lock_icon = imagePath('lock-icon.svg')
const lock_arrow = imagePath('icon-arrow-dbl.svg')

/**
 * 查看合盘报告好友信息
 */
const toList = () => back('/pages/community/friend/list/index')
</script>

<template>
  <PageWrapper
    name="community-friend-report-detail"
    :pageStyle="{ backgroundImage: img_bg }"
  >
    <div class="top">
      <div class="inner">
        <div
          class="switchor"
          @click="toList"
        >
          <div
            class="icon"
            :style="{ backgroundImage: icon_switch }"
          ></div>
          切换
        </div>

        <div class="item">
          <div class="name">{{ userInfo?.nickname }}</div>
          <div class="info">{{ userInfo?.birthday }}</div>
          <div class="info">{{ userInfo?.zodiacSign }}</div>
        </div>
        <div
          class="link"
          :style="{ backgroundImage: icon_link }"
        ></div>
        <div class="item">
          <div class="name">{{ friendInfo?.nickname }}</div>
          <div class="info">{{ friendInfo?.birthday }}</div>
          <div class="info">{{ friendInfo?.zodiacSign }}</div>
        </div>

        <div class="extra">
          <div class="score"><span class="val">{{ result?.score }}</span>分</div>
          <div class="relation">关系：{{ friendInfo?.groupName }}</div>
        </div>
      </div>
    </div>

    <div
      class="logo"
      :style="{ backgroundImage: img_logo }"
    >
      <div
        class="btn"
        :style="{ backgroundImage: btn_bg }"
        @click="createPoster"
      >生成海报</div>
    </div>

    <div
      v-for="(item, idx) in fortuneList"
      :key="idx"
      class="detail"
      :style="{ backgroundImage: info_bg }"
    >
      <div class="title">{{ item.title }}</div>
      <div class="info">
        <div class="icon">·</div>
        <div>{{ item.desc }}</div>
      </div>

      <div
        v-if="!item.desc && lockedStatus"
        class="lock-mask"
        @click="showUnlockMask = true"
      >
        <div
          class="lock-icon"
          :style="{ backgroundImage: lock_icon }"
        ></div>
        {{ lockedStatus.tip }}
        <div
          class="lock-icon"
          :style="{ backgroundImage: lock_arrow }"
        ></div>
      </div>
    </div>

    <div class="blank"></div>

    <template #page>
      <UnlockMask />
    </template>
  </PageWrapper>
</template>

<style lang="less" scoped>
.top {
  width: 686rpx;
  height: 266rpx;

  margin: 32rpx auto 0;

  border-radius: 32rpx;
  box-shadow: 0 4rpx 8rpx 0 #fff, 0 2rpx 10rpx 0 #CE017C inset;

  display: flex;
  justify-content: center;
  align-items: center;

  .inner {
    position: relative;
    width: 646rpx;
    height: 226rpx;

    box-sizing: border-box;
    padding-top: 74rpx;
    padding-left: 32rpx;

    border-radius: 32rpx;
    background-color: #EE88D1;
    box-shadow: 0 0 24rpx 2rpx rgba(243, 0, 182, .33);

    display: flex;

    .switchor {
      position: absolute;
      top: 14rpx;
      right: 8rpx;

      padding: 2rpx 10rpx;

      border-radius: 38rpx;
      border: 2rpx solid #fff;

      display: flex;
      align-items: center;

      color: #fff;
      font-size: 28rpx;

      .icon {
        width: 32rpx;
        height: 32rpx;

        margin-right: 6rpx;
      }
    }

    .item {
      width: 160rpx;

      text-align: center;

      .name {
        color: #fff;
        font-size: 48rpx;
        line-height: 32rpx;
        text-shadow: 0 6rpx 8rpx rgba(#000, .25);
      }

      .info {
        margin-top: 14rpx;

        color: #FFEFCB;
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }

    .link {
      width: 80rpx;
      height: 80rpx;

      margin-top: 22rpx;
    }

    .extra {
      margin-left: 10rpx;

      text-align: center;

      .score {
        margin-left: 16rpx;

        color: #fff;
        font-size: 64rpx;
        line-height: 64rpx;
        text-shadow: 0 6rpx 8rpx rgba(#000, .25);

        .val {
          margin-right: 20rpx;

          font-size: 96rpx;
        }
      }

      .relation {
        margin-top: 16rpx;

        color: #FFCD60;
        font-size: 32rpx;
        text-shadow: 0 6rpx 8rpx rgba(#000, .25);
      }
    }
  }
}

.logo {
  position: relative;
  width: 740rpx;
  height: 345rpx;

  margin: 20rpx auto 0;

  .btn {
    position: absolute;
    top: -8rpx;
    right: 26rpx;

    width: 197rpx;
    height: 86rpx;

    color: #fff;
    font-size: 32rpx;
    line-height: 80rpx;
    text-align: center;
  }
}

.detail {
  position: relative;
  width: 686rpx;
  min-height: 150rpx;

  margin: 16rpx auto 0;

  box-sizing: border-box;
  padding: 24rpx 28rpx;

  color: #fff;
  font-size: 32rpx;
  line-height: 30rpx;
  text-shadow: 0 2rpx 2rpx #B60EFF;

  border-radius: 36rpx;
  box-shadow: 0 8rpx 8rpx 0 rgba(90, 0, 135, .27), 0 2rpx 4rpx 0 rgba(126, 12, 167, .57);

  .title {
    position: relative;

    z-index: 1;
  }

  .info {
    margin-top: 16rpx;

    font-size: 24rpx;

    display: flex;

    .icon {
      padding: 0 14rpx;
    }
  }

  .lock-mask {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    backdrop-filter: blur(10rpx);
    background-color: rgba(#fff, .33);

    box-sizing: border-box;
    padding-top: 20rpx;

    border-radius: 36rpx;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #821CAF;
    font-size: 24rpx;
    line-height: 32rpx;
    text-shadow: none;

    .lock-icon {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.blank {
  width: 100%;
  height: 100rpx;
}
</style>